<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>管理列表</p>
		</header>

		<!-- 商家列表部分 -->
		<ul class="food">
			<li v-for="item in foodArr">
				<div class="food-img">
					<img :src=item.foodImg>
					<div class="food-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
				</div>
				<div class="food-info">
					<h3>{{item.foodName}}</h3>
					<!--<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>-->
					<p>{{item.foodExplain}}</p>
					<!--<h4 @click="toFoodManagement(item.businessId)">管理菜品</h4>-->
				</div>
				<!--删除菜品图标-->
				<div class="food-delete">
					<i class="fa fa-edit" @click="toUpdateFoodInfo(item)"></i>
					<i class="fa fa-times" @click="deleteFood(item)"></i>
				</div>
			</li>
		</ul>
		<div style="margin-bottom: 12vw;">
			<button @click="toInsertFoodInfo(businessId)">新增菜品</button>
		</div>
		<p>------------------------------------------------------</p>

		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import Footer from '../components/Footer.vue';
	import axios from 'axios';
	import qs from 'qs';
	import {
		useRouter,
		useRoute
	} from 'vue-router';

	const {
		proxy
	} = getCurrentInstance();
	const foodArr = ref([]);
	const user = ref({});
	const route = useRoute();
	const router = useRouter();
	const businessId = route.query.businessId;

	// 在组件挂载时获取数据
	onMounted(() => {
		user.value = proxy.$getSessionStorage('user');
		axios.post('FoodController/listFoodByBusinessId', qs.stringify({
			businessId: businessId.value
		})).then(response => {
			foodArr.value = response.data;
		}).catch(error => {
			console.error(error);
		});
	});

	// 方法
	const toUpdateFoodInfo = (food) => {

		food = JSON.stringify(food);
		router.push({
			path: '/updateFoodInfo',
			query: {
				food
			}
		});
	};

	const toInsertFoodInfo = (businessId) => {
		router.push({
			path: '/insertFoodInfo',
			query: {
				businessId
			}
		});
	};

	const deleteFood = (food) => {
		if (!confirm('确认要删除此菜品吗？')) {
			return;
		}
		axios.post('FoodController/deleteFoodInfo', qs.stringify({
			foodId: food.foodId
		})).then(response => {
			alert("删除成功");
			// 重新加载食物列表
			return axios.post('FoodController/listFoodByBusinessId', qs.stringify({
				businessId: businessId.value
			}));
		}).then(response => {
			foodArr.value = response.data; // 更新食物列表
		}).catch(error => {
			alert("删除失败");
			console.error(error);
		});
	};
</script>


<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 菜品列表部分 ******************/
	.wrapper .food {
		width: 100%;
		margin-top: 12vw;
		margin-bottom: 14vw;
	}

	.wrapper .food li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;

		display: flex;
		align-items: center;
	}

	.wrapper .food li .food-img {
		/*这里设置为相当定位，成为food-img-quantity元素的父元素*/
		position: relative;
	}

	.wrapper .food li .food-img img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .food li .food-img .food-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;

		display: flex;
		justify-content: center;
		align-items: center;

		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .business li .food-info {
		margin-left: 3vw;
	}

	.wrapper .business li .food-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .business li .food-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}

	.wrapper .food li .food-delete {
		margin-left: auto;
		/* 将删除图标推到列表项的最右侧 */
		cursor: pointer;
		/* 将鼠标指针设置为点击状态 */
		font-size: 4vw;
		/* 设置图标的大小 */
		color: #ccc;
		/* 设置图标的默认颜色 */
	}

	.wrapper .food li .food-delete i {
		/* 如果需要，可以在这里添加更多样式 */
	}

	/* 鼠标悬停在删除图标上时的样式变化 */
	.wrapper .food li .food-delete:hover i {
		color: #f00;
		/* 鼠标悬停时图标变红色 */
	}
</style>